<template>
  <view class="bg-[#f5f5f5] min-h-screen pb-[100rpx]">
    <!-- 顶部搜索区域 -->
    <view
      class="top-content flex p-[20rpx] bg-gradient-to-r from-[#ffd592] h-[362rpx]"
    >
      <view
        class="flex-1 flex items-center bg-white rounded-[40rpx] relative h-[70rpx] pl-[40rpx] pr-[4rpx]"
      >
        <image
          src="@/static/home/home-search.png"
          class="w-[30rpx] h-[30rpx] mr-[15rpx]"
        ></image>
        <input
          type="text"
          placeholder="搜索感兴趣的商品"
          placeholder-class="text-[#999] text-[28rpx]"
          placeholder-style="font-size:26rpx;"
          class="flex-1 h-full text-[28rpx]"
          v-model="searchText"
        />
        <view
          class="btnLinearGradient text-[28rpx] h-[64rpx] w-[116rpx] flex items-center justify-center text-white rounded-full"
          @click="handleSearch"
        >
          搜索
        </view>
      </view>
    </view>

    <!-- 轮播图区域 -->

    <view class="p-[20rpx] absolute top-[calc(196rpx-88rpx)] left-0 right-0">
      <swiper
        v-if="bannerList.length > 0"
        class="h-[320rpx] rounded-[20rpx] overflow-hidden"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image
            :src="item.imageUrl"
            mode="aspectFill"
            class="w-full h-full rounded-[20rpx]"
            @click="handleBannerClick(item)"
          ></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 分类导航 -->
    <view
      class="flex flex-wrap p-[20rpx] bg-white mb-[20rpx] mt-[117rpx] justify-center"
    >
      <template v-if="categoryList.length > 0">
        <view
          class="w-1/4 flex flex-col items-center mb-[30rpx]"
          v-for="(item, index) in categoryList"
          :key="index"
          @click="navigateToCategory(item.id)"
        >
          <image
            :src="upload_url + item.icon"
            mode="aspectFit"
            class="w-[100rpx] h-[100rpx] mb-[10rpx] rounded-full p-[10rpx]"
          ></image>
          <text class="text-[26rpx] text-[#333]">{{ item.name }}</text>
        </view>
      </template>
      <up-empty v-else mode="list" text="暂无分类数据"></up-empty>
    </view>

    <!-- 热门产品 -->
    <view class="bg-white p-[20rpx]">
      <view class="text-[36rpx] font-bold mb-[30rpx] text-[#333]"
        >热门产品</view
      >
      <view class="flex flex-col" v-if="hotProducts.length > 0">
        <view
          class="flex mb-[30rpx] pb-[30rpx] border-b border-[#f0f0f0]"
          v-for="(item, index) in hotProducts"
          :key="index"
          @click="goToProductDetail(item)"
        >
          <image
            :src="upload_url + item.coverImgUrl"
            mode="aspectFill"
            class="w-[200rpx] h-[200rpx] rounded-[10rpx] mr-[20rpx]"
          ></image>
          <view class="flex-1 flex flex-col justify-between">
            <view class="mb-[10rpx]">
              <view>
                <!-- class="bg-[#252523] text-white flex px-[6rpx] mr-[8rpx] mb-[6rpx]" -->
                <view style="display: inline-block">
                  <view
                    class="bg-[#252523] mr-[10rpx] text-white flex items-center justify-center px-[6rpx] rounded-[4rpx]"
                  >
                    <img
                      src="@/static/home/hot.png"
                      alt=""
                      class="w-[20rpx] h-[20rpx]"
                    />
                    <view class="text-[10px] ml-[2rpx]" v-if="item.isHot === 0"
                      >爆款</view
                    >
                  </view>
                </view>
                <text
                  class="text-[28rpx] text-[#333] break-words"
                  style="word-break: break-all; white-space: normal"
                  >{{ item.name }}</text
                >
              </view>
            </view>
            <view class="text-[36rpx] font-bold text-[#f1a755]">
              ¥{{ item.price || "0" }}<text class="text-[24rpx]">.00</text>
            </view>
          </view>
        </view>
      </view>
      <up-empty v-else mode="order" text="暂无热门产品"></up-empty>
    </view>

    <!-- 底部导航 -->
    <view
      class="fixed bottom-0 left-0 right-0 h-[100rpx] bg-white flex shadow-[0_-2rpx_10rpx_rgba(0,0,0,0.05)]"
    >
      <view
        class="flex-1 flex flex-col items-center justify-center active"
        @click="switchTab('home')"
      >
        <view
          class="text-[44rpx] text-[#e3c09b] mb-[4rpx] iconfont icon-home"
        ></view>
        <view class="text-[22rpx] text-[#e3c09b]">首页</view>
      </view>
      <view
        class="flex-1 flex flex-col items-center justify-center"
        @click="switchTab('category')"
      >
        <view
          class="text-[44rpx] text-[#999] mb-[4rpx] iconfont icon-category"
        ></view>
        <view class="text-[22rpx] text-[#999]">分类</view>
      </view>
      <view
        class="flex-1 flex flex-col items-center justify-center"
        @click="switchTab('mine')"
      >
        <view
          class="text-[44rpx] text-[#999] mb-[4rpx] iconfont icon-mine"
        ></view>
        <view class="text-[22rpx] text-[#999]">我的</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getBanner, getHotProject, getProjectCategory } from "@/api/home";
import { upload_url } from "@/utils/config";
import type {
  BannerResponseData,
  ProjectCategoryResponseData,
  HotProjectResponseData,
} from "@/api/home";
import { onShow } from "@dcloudio/uni-app";
// 定义接口
interface CategoryItem {
  name: string;
  icon: string;
  url: string;
  bgColor: string;
}

// 分类列表
const categoryList = ref<ProjectCategoryResponseData[]>([
  // {
  //   name: "时尚丽人",
  //   icon: "/static/home/item_1.png",
  //   url: "/pages/category/fashion",
  //   bgColor: "#FBE8DD",
  // },
  // {
  //   name: "身体管理",
  //   icon: "/static/home/item_2.png",
  //   url: "/pages/category/body",
  //   bgColor: "#FBE8DD",
  // },
  // {
  //   name: "健康养生",
  //   icon: "/static/home/item_3.png",
  //   url: "/pages/category/health",
  //   bgColor: "#FBE8DD",
  // },
  // {
  //   name: "品质生活",
  //   icon: "/static/home/item_4.png",
  //   url: "/pages/category/quality",
  //   bgColor: "#F0FADB",
  // },
  // {
  //   name: "小儿健康卡",
  //   icon: "/static/home/item_5.png",
  //   url: "/pages/category/child",
  //   bgColor: "#FBE8DD",
  // },
  // {
  //   name: "健康调理卡",
  //   icon: "/static/home/item_6.png",
  //   url: "/pages/category/card",
  //   bgColor: "#F0FADB",
  // },
  // {
  //   name: "全部",
  //   icon: "/static/home/item_7.png",
  //   url: "/pages/category/all",
  //   bgColor: "#F0FADB",
  // },
]);

// 修改热门产品类型
const hotProducts = ref<HotProjectResponseData[]>([]);
// 导航到分类页面
const navigateToCategory = (id: number | undefined) => {
  // 将分类id存储到本地存储中
  if (id !== undefined) {
    uni.setStorageSync("categoryId", id);
  }
  uni.switchTab({
    url: `/pages/classify/index`,
  });
};

// 跳转到商品详情页
const goToProductDetail = (product: HotProjectResponseData) => {
  uni.navigateTo({
    url: `/pages/home/goodsDetail?id=${product.id}`,
  });
};

// 切换底部标签页
const switchTab = (tab: string) => {
  if (tab !== "home") {
    uni.switchTab({
      url: `/pages/${tab}/index`,
    });
  }
};
const pageNum = ref(1);
const pageSize = ref(10);
const bannerList = ref<BannerResponseData[]>([]);
const searchText = ref("");
onShow(() => {
  getBanner({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    console.log(res);
    bannerList.value = res.data;
  });
  handleHotProject();
  handleProjectCategory();
});

const CategoryPageNum = ref(1);
const CategoryPageSize = ref(6);

// 查询分类
const handleProjectCategory = () => {
  getProjectCategory({
    pageNum: CategoryPageNum.value,
    pageSize: CategoryPageSize.value,
  }).then((res) => {
    categoryList.value = res.data.records;
    categoryList.value.push({
      id: "all", // 给全部添加特殊标识
      name: "全部",
      icon: "/static/home/item_7.png",
      products: [],
    });
  });
};

// 热门产品
const handleHotProject = () => {
  getHotProject(searchText.value).then((res) => {
    console.log(res);
    hotProducts.value = res.data;
  });
};
const handleBannerClick = (item: BannerResponseData) => {
  if (item.targetUrl) {
    // 内部页面跳转
    uni.navigateTo({
      url: `/pages/home/goodsDetail?id=${item.targetUrl}`,
    });
  }
};
const handleSearch = () => {
  handleHotProject();
};
</script>

<style lang="scss" scoped>
.top-content {
  background: url("@/static/home/home-bgc.png") no-repeat;
  background-size: 100% 100%;
}
</style>
